{% load i18n thumbnail %}

<div class="row">
  {% if pets %}
    {% for pet in pets %}
      <div class="col-xs-12 col-sm-6 col-md-4 card-pet">
        {% include '_partials/pet_card.html' with pet=pet show_badge=True only %}
      </div>

      {% if forloop.counter == 6 %}
        <div class="ad-pet-list-wrapper">
          <div class="col-xs-12 col-sm-6 col-md-4 card-pet">
            <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
            <ins class="adsbygoogle ad-pet-list"
                 style="display:block"
                 data-ad-format="fluid"
                 data-ad-layout-key="+2l+p4-1j-4h+yc"
                 data-ad-client="ca-pub-6841471717625916"
                 data-ad-slot="8099977372"></ins>
            <script>
                (adsbygoogle = window.adsbygoogle || []).push({});
            </script>
          </div>
        </div>
      {% endif %}
    {% endfor %}

    {% if pets.paginator.num_pages > 1 %}
      <div class="col-xs-12">
        <nav class="text-center">
          <ul class="pagination">
            <li>
              {% if pets.has_previous %}
                <a href="?page={{ pets.previous_page_number }}">{% trans 'Previous' %}</a>
              {% endif %}
            </li>

            {% for page in pets.paginator.page_range %}
              <li {% if current_page == page %}class="active"{% endif %}>
                <a href="?page={{ page }}">{{ page }}</a>
              </li>
            {% endfor %}

            <li>
              {% if pets.has_next %}
                <a href="?page={{ pets.next_page_number }}">{% trans 'Next' %}</a>
              {% endif %}
            </li>
          </ul>
        </nav>
      </div>
    {% endif %}
  {% else %}
    <div class="col-md-12">
      <h4>{% trans 'No friends in this category yet :)' %}</h4>
    </div>
  {% endif %}
</div>